<template>
    <view class="idiom">
      <!-- <view class="item-view" :style="{ 'background-image': 'url(' + head + ')' }" ></view>
      <view class='item-view' :style="{ 'background-image': 'url(' + bottom + ')' }" ></view> -->
      <image
        class="bg"
        :src="head"
        mode="widthFix"
      ></image>
      <image
        class="bg"
        :src="bottom"
        mode="widthFix"
        style="margin-top: -15rpx;"
      ></image>
      <Start  v-if="defStatus === EnumStatus.STATUS" v-model:content="content" v-model:defStatus="defStatus"  />
      <Result v-else :content="content" v-model:defStatus="defStatus"  />
    </view>
    <Roast />
    <Recommend :top='98'/>
    <ToDY />
  </template>
  <script setup lang="ts">
  import { EnumStatus } from "@/utils/constants";
  import Start from "./components/Start.vue";
  import Result from "./components/Result.vue";
  
  import Roast from "@/components/Roast/Roast.vue";
  import Recommend from "@/components/Recommend/Recommend.vue";
  import ToDY from "@/components/ToDY/ToDY.vue";
  
  const defStatus = ref(EnumStatus.STATUS)
  const content = ref()
  const head = computed(()=>{
      return defStatus.value === EnumStatus.STATUS ? 'http://img-miniprogram-o.doutuimao.net/lovesc/common/2022/08/16/2022081611073077187014.jpg' 
      : 'http://img-miniprogram-o.doutuimao.net/lovesc/common/2022/08/16/2022081611073151009062.png'
  })
  const bottom = computed(()=>{
      return defStatus.value === EnumStatus.STATUS ? "http://img-miniprogram-o.doutuimao.net/lovesc/common/2022/08/16/2022081611073188675722.png" :
          'http://img-miniprogram-o.doutuimao.net/lovesc/common/2022/08/16/2022081611073167762661.png'
      
  })
  </script>
  
  <style>
  page{
      width: 100%;
      height: 100%;
  }
  
  </style>
  <style lang="scss" scoped>
  .idiom{
      width: 100%;
      height: 100%;
    //   .item-view{
    //       width: 100%;
    //       height:50%;
    //       background-size:100% 100%;
	// 	  background-repeat:no-repeat;
    //   }
    .bg{
        width: 100%;
    }
  }
  </style>
  